<template>
  <!-- 积分记录页面 -->
  <div class="box">
    <div class="row_top">
      <van-sticky>
        <van-row>
          <van-col
            span="12"
            @click="showTime"
            :style="{fontSize:'16px'}"
          >{{data_time}}
            <van-icon name="arrow-down" />
          </van-col>
          <van-col
            span="12"
            @click="showPopup"
            :style="{fontSize:'16px'}"
          >全部
            <van-icon name="arrow-down" />
          </van-col>
          <!-- 时间插件 -->
          <van-popup
            v-model="time"
            :safe-area-inset-bottom="true"
            :style="{width:'86%',fontSize:'14px',borderRadius:'10px'}"
            :overlay-style="{background:'rgba(0, 0, 0, 0.34)'}"
          >
            <van-datetime-picker
              v-model="currentDate"
              type="date"
              :min-date="minDate"
              :max-date="maxDate"
              @confirm="getTime"
              @cancel="show_time_end"
            />
          </van-popup>
          <!-- 状态筛选 -->
          <van-popup
            v-model="show"
            :safe-area-inset-bottom="true"
            :style="{ width:'54%',fontSize:'14px',borderRadius:'10px'}"
            :overlay-style="{background:'rgba(0, 0, 0, 0.34)'}"
          >
            <van-radio-group v-model="radio">
              <van-cell-group :style="{textAlign:'left'}">
                <van-cell
                  :title="it.name"
                  clickable
                  @click="showStatus(it.index)"
                  v-for="(it,y) in status"
                  :key="y+'info--'"
                >
                  <van-radio
                    slot="icon"
                    :name="it.index"
                    :style="{marginRight:'4vw'}"
                  />
                </van-cell>
              </van-cell-group>
            </van-radio-group>
          </van-popup>
        </van-row>
      </van-sticky>
    </div>
    <div class="top_content">
      <div
        class="row_top_title_r"
        @click="showTabs"
      >
        <span>我参与的事件</span>
        <span>
          <van-icon name="arrow" /></span>
      </div>
      <div style="background:#fff;">
      </div>
      <div>
        <van-list
          v-model="loading"
          :finished="finished"
          :offset="offset"
          :immediate-check="false"
          finished-text="我是有底线的"
          @load="onLoadlist"
        >
          <div
            style="width:90vw;margin:0px auto"
            v-for=" item in list"
            :key="item.id"
          >
            <div
              class="skeleton clearfix"
              style="position:relative;margin-top:10px"
              v-for="ol  in item.approvalevent.approvalderive"
              :key="ol.a_id+'i++'"
              @click="showIntegralDetails(ol.a_id,2)"
            >
              <div
                class="skeleton_title left"
                v-if="item.create_name.length<3"
              >
                {{((item.create_name.split("").reverse().join("")).substring(0,1)).split("").reverse().join("")}}
              </div>
              <div
                class="skeleton_title left"
                v-if="item.create_name.length>=3"
              >
                {{((item.create_name.split("").reverse().join("")).substring(0,2)).split("").reverse().join("")}}
              </div>
              <div
                class="skeleton_content left"
                style="padding-bottom:30px"
              >
                <ul>
                  <li> {{item.create_name}}</li>
                  <li style="margin-bottom:10px">{{item.create_date}}</li>
                  <li style="overflow-wrap:break-word;width:64vw">{{item.approvalevent.event_name}}</li>
                  <li>初审人：<span>{{item.first_name}}</span></li>
                  <li style="font-size:16px;color:#2c3e50;margin-top:0px">终审人：<span>{{item.end_name}}</span></li>
                </ul>
              </div>
              <div
                class="right"
                style="position:absolute;bottom:15px;right:15px;font-size:13px"
              >
                <p><span>{{D_name}}: <span v-if='ol.code_b.toString().indexOf("-") != -1||ol.code_b==0'>{{ol.code_b}}</span><span v-else>+{{ol.code_b}}</span></span>
                  <span v-if="ISC == 1" :class="ol.code_c==0?'active':'show'">{{C_name}}: <span v-if='ol.code_c.toString().indexOf("-") != -1||ol.code_b==0'>{{ol.code_c}}</span><span v-else>+{{ol.code_c}}</span></span>
                </p>
                <p
                  class="right"
                  style="color:silver;margin-top:10px;font-size:13px"
                >
                  <span>{{ol.num}}人提交</span></p>
              </div>
            </div>
          </div>
        </van-list>
      </div>
    </div>
  </div>
</template>

<script type="text/javascript">
import {
  Row,
  Col,
  Icon,
  Popup,
  RadioGroup,
  Radio,
  Cell,
  CellGroup,
  DatetimePicker,
  Skeleton
} from "vant";
import Vue from "vue";
export default {
  data() {
    return {
      radio: 5,
      arr: false,
      show: false,
      time: false,
      date: undefined,
      loading: false, // 上拉加载
      finished: false, // 上拉加载完毕
      offset: 100, // 滚动条与底部距离小于 offset 时触发load事件
      pageSize: 10, // 每页条数
      pageIndex: 1, // 页码
      list: [],
      goods: [],
      status: [
        {
          index: 5,
          name: "全部"
        },
        {
          index: 0,
          name: "初审中"
        },
        {
          index: 1,
          name: "终审中"
        },
        {
          index: 2,
          name: "通过"
        },
        {
          index: 3,
          name: "驳回"
        },
        {
          index: 4,
          name: "撤回"
        }
      ],
      page: 0,
      jp: 0,
      minDate: new Date(2018, 0, 1),
      maxDate: new Date(),
      currentDate: new Date(),
      data_time: "时间",
      C_name: "",
      D_name: "",
      active_show: 5,
      ISC:''
      //   active_end: 0
    };
  },
  components: {
    [Row.name]: Row,
    [Col.name]: Col,
    [Icon.name]: Icon,
    [Popup.name]: Popup,
    [RadioGroup.name]: RadioGroup,
    [Radio.name]: Radio,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [DatetimePicker.name]: DatetimePicker,
    [Skeleton.name]: Skeleton,
  },
  created() {
    this.C_name = localStorage.getItem("c_name");
    this.D_name = localStorage.getItem("d_name");
    // this.getParticipateIn(0, 5);
    this.getSubmission(0, 5);
    this.getIsC();
     dd.biz.navigation.setTitle({
        title: "我提交的事件" //控制标题文本，空字符串表示显示默认文本
      });
  },
  methods: {
     //C分开关
    async getIsC(){
      let corpId = localStorage.getItem("custid");
      const res = await this.$http.get(
        `yuepoints/getIsC?corpId=${corpId}`
      );
      // localStorage.setItem("ISC", res.data.data.is_c_code);
      this.ISC = res.data.data.is_c_code
    },
      // 时间取消
    show_time_end(){
        this.data_time = "时间";
        this.currentDate = new Date();
        this.getSubmission(0, this.active_show);
        this.time=false
    },
    // 时间刷选
    getTime(time) {
      const d = new Date(time);
      let yy = d.getFullYear();
      let mm = this.p(d.getMonth() + 1);
      let dd = this.p(d.getDate());
      const resDate = yy + "-" + mm + "-" + dd;
      this.data_time = resDate;
      this.pageIndex = 1;
      this.page = 0;
      if (this.active_show == 5) {
        this.getSubmission(0, 5,resDate);
      } else {
        this.getSubmission(0, this.active_show, resDate);
      }
      this.time = false;
    },
    p(s) {
      return s < 10 ? "0" + s : s;
    },
    // 状态筛选
    showStatus(i) {
      this.active_show = i;
      if (i == 5) {
        this.data_time = "时间";
        this.getSubmission(0, 5);
      } else {
        this.pageIndex = 1;
        this.page = 0;
        this.getSubmission(0, i, this.data_time);
      }

      this.show = false;
    },
    showTabs() {
      this.$router.push({ path: "/record" });
    },
    async getSubmission(cursor, i, date) {
      let userId = localStorage.getItem("userId");
        let corpId = localStorage.getItem("custid");
      // let corpId = this.$utils.getUrlKey("custid");
      if (date == undefined || date == "时间") {
        date = "";
      }
      await this.$http
        .get(
          `yuepoints/integralRecord?corpId=${corpId}&cursor=${cursor}&type=Establish&userId=${userId}&status=${i}&date=${date} `
        )
        .then(res => {
          const { data, cursor, errcode } = res.data;
          if (errcode == "0000") {
            this.$forceUpdate();
            if (data.event.length == 0 || data.event == null) {
              this.finished = true;
              return;
            }
            if (data.event.length < this.pageSize) {
              this.finished = true;
            }
            if (this.pageIndex == 1) {
              this.list = data.event;
            } else {
              this.list = this.list.concat(data.event);
            }
            if (cursor > 0) {
              this.page = cursor;
            }
          } else {
            this.list = [];
            this.finished = false;
          }
        })
        .catch(error => {

        })
        .finally(() => {
          this.loading = false;
        });
    },
    onLoadlist() {
      const p = this.page;
      this.pageIndex++;

      this.getSubmission(p, this.active_show, this.data_time);
    },
    // 跳转详情页
    showIntegralDetails(id, type) {
      this.$router.push({
        //核心语句
        path: "/integralDetails", //跳转的路径
        query: {
          //路由传参时push和query搭配使用 ，作用时传递参数
          id: id,
          status: type
        }
      });
    },
    showPopup() {
      this.show = true;
    },

    showTime() {
      this.time = true;
    }
  }
};
</script>

<style lang="less" scoped>
.box {
  background-color: #f8f4f4;
  /deep/ .van-sticky {
    background: #fff;
  }
  p {
    margin: 0px;
  }
  .row_top {
    background-color: #fff;
    height: 40px;
    line-height: 40px;
  }
  .top_content {
    margin: 10px 20px;
    margin-bottom: 8vh;
    .row_top_title_l,
    .row_top_title_r {
      background-color: #fff;
      font-size: 14px;
      height: 40px;
      line-height: 40px;
      span:first-child {
        float: left;
        padding-left: 15px;
      }
      span:last-child {
        float: right;
        padding-right: 5px;
      }
    }
    .skeleton {
      background: #fff;
      padding: 10px 0px 20px 10px;
      text-align: left;
      .skeleton_title {
        color: #fff;
        width: 48px;
        height: 48px;
        border-radius: 50%;
        text-align: center;
        line-height: 48px;
        background: rgb(89, 209, 255);
        font-size: 16px;
        margin-right: 15px;
      }
      .skeleton_content {
        li {
          font-size: 16px;
        }
        li:nth-child(2) {
          font-size: 13px;
          color: silver;
        }
        li:nth-child(5),
        li:nth-child(6) {
          font-size: 13px;
          margin-top: 10px;
          color: rgb(117, 116, 116);
        }
      }
      /deep/ .van-icon {
        color: silver;
        font-size: 19px;
      }
    }
    li {
      text-align: left;
    }
    /deep/ .van-collapse-item__title {
      border: 1px solid #f2f3f5;
    }
  }
  .color {
    color: dodgerblue;
  }
  .color1 {
    color: silver;
  }
  .left {
    float: left;
  }
  .right {
    float: right;
  }
  .active {
    display: none;
  }
  .show {
    display: inline-block;
  }
  .active1 {
    display: block;
  }
}
.clearfix::after {
  content: "";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.clearfix {
  zoom: 1;
}
</style>
